<template>
  <div class="menu">
    <el-row type="flex" justify="end">
      <el-button type="primary" size="medium" @click="handleCreateMenu">
        新建菜单
      </el-button>
    </el-row>
    <page-content
      ref="pageContent"
      v-loading="loading"
      :content-table-config="contentTableConfig"
    >
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(row)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          class="delete-btn"
          @click="handleDelete(row)"
        >
          删除
        </el-button>
      </template>
    </page-content>
    <PageModal
      :modal-form-data="modalFormData"
      :modal-form-config="modalFormConfig"
      :visible.sync="dialogVisible"
      title="新建菜单"
      :btn-loading="confirmBtnLoading"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script>
import { contentTableConfig } from "./config/content.config";
import { modalFormConfig } from "./config/modal.config";
import {
  fetchCreateMenu,
  fetchMenuList,
  fetchDeleteMenu,
  fetchMenuDetail,
} from "@/api/useManage";
export default {
  data() {
    return {
      loading: false,
      modalFormConfig,
      contentTableConfig,
      confirmBtnLoading: false,
      dialogVisible: false,
      modalFormData: {},
    };
  },
  mounted() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      this.loading = true;
      fetchMenuList()
        .then((res) => {
          this.contentTableConfig.dataList = res.data;
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    initMenuSelect() {
      fetchMenuList().then((res) => {
        this.modalFormConfig.formItems[0].options = res.data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      });
    },
    handleEdit(row) {
      this.initMenuSelect();
      fetchMenuDetail(row.id).then((res) => {
        this.modalFormData = { ...this.modalFormData, ...res.data };
      });
      this.dialogVisible = true;
    },
    handleCreateMenu() {
      this.initMenuSelect();
      this.modalFormData = {};
      this.dialogVisible = true;
    },
    handleDelete({ id }) {
      this.$confirm("确认删除该菜单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchDeleteMenu(id).then(() => {
            this.$message.success("删除成功");
            this.getMenuList();
          });
        })
        .catch(() => {});
    },
    handleConfirm(data) {
      this.confirmBtnLoading = true;
      const params = {
        ...this.modalFormData,
        ...data,
      };
      params.pid = params.pid ? params.pid : 0;
      fetchCreateMenu(params)
        .then(() => {
          this.$message.success("操作成功");
          this.getMenuList();
          this.dialogVisible = false;
        })
        .finally(() => {
          this.confirmBtnLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.menu {
  margin-top: 15px;
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
